<template>
  <div id="userManager">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>

      <el-card>
             <!-- 搜索框 -->
      <el-row :gutter="21" class="opt_div">
        <el-col :span="4">
          <el-input placeholder="请输入用户姓名" v-model="workName"  size="mini"></el-input>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入用户电话" v-model="workTel"  size="mini"></el-input>
        </el-col>
        <el-col :span="4">
            <el-select v-model="workSex" placeholder="请选择性别" size="mini">
                <el-option label="全部" value=""></el-option>
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
            </el-select>
        </el-col>
        <el-col :span="4">
            <el-select v-model="roleId" placeholder="请选择角色" size="mini">
                <el-option label="全部" value="100"></el-option>
                <el-option
                v-for="(v,index) in roleList"
                :key="index"
                :label="v.roleName"
                :value="v.roleId"></el-option>
            </el-select>
        </el-col>
        <el-col :span="4">
            <el-button type="primary" size="mini" @click="searchUser">查询</el-button>
        </el-col>
<!--        <el-row class="div_btn">-->
          <el-col :span="4" class="div_btn">
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addUser" size="mini">添加用户</el-button>
          </el-col>
<!--        </el-row>-->
      </el-row>

       <el-table :data="userList" border size="mini">

<!--        <el-table-column type="expand">-->
<!--          <template slot-scope="props">-->
<!--            <el-form label-position="left" class="demo-table-expand">-->
<!--              <el-form-item label="用户密码">-->
<!--                <span>{{ props.row.password }}</span>-->
<!--              </el-form-item>-->
<!--            </el-form>-->
<!--          </template>-->
<!--        </el-table-column>-->

        <el-table-column type="index" width="55"></el-table-column>
        <el-table-column prop="workName" label="用户账号" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="workSex" label="用户性别" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="workIdCard" label="用户身份证号" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="workTel" label="用户电话" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="creatTime" label="注册时间" ></el-table-column>
        <el-table-column prop="roleName" label="用户角色" >
               <template slot-scope="scope">
                   <span v-if="scope.row.roleName==null">未分配角色</span>
                   <span v-else>{{scope.row.roleName}}</span>
               </template>
        </el-table-column>
        <el-table-column label="操作">
           <template slot-scope="scope">
             <el-button type="success" icon="el-icon-edit" circle size="mini" @click="updateUser(scope.row.workId)"></el-button>
             <el-button type="danger" icon="el-icon-delete" circle @click="delUser(scope.row.workId)" size="mini"></el-button>
           </template>
        </el-table-column>
       </el-table>
        <el-pagination
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
      </el-card>
    </div>
</template>
<script>
export default {
    name:"UserManager",
    data(){
        return{
            workName:"",
            workTel:"",
            workSex:"",
            roleId:"",
            userList:[],
            pageIndex:1,
            total:0,
            pageSize:3,
            roleList:[],
        }
    },
    methods: {
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
         this.getUserList(this.workName,this.workTel,this.workSex,this.roleId,this.pageIndex,this.pageSize)
        },
        handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageIndex = val;
          this.getUserList(this.workName,this.workTel,this.workSex,this.roleId,this.pageIndex,this.pageSize)
        },

        //查询所有用户信息
        getUserList(workName,workTel,workSex,roleId,pageIndex,pageSize){
            var params = new URLSearchParams();
            params.append("workName",workName)
            params.append("workTel",workTel)
            params.append("workSex",workSex)
            params.append("roleId",roleId)
            params.append("pageIndex",pageIndex)
            params.append("pageSize",pageSize)

            this.$axios.post("/user-info/getUserList",params).then(res=>{
                //调试 输出一下res
                console.log(res)
                this.userList=res.data.data.list
                this.total=res.data.data.total
            }).catch(err=>{
                console.log(err)
            })
        },

        //模糊查询
        searchUser(){
            this.pageIndex=1
            this.getUserList(this.workName,this.workTel,this.workSex,this.roleId,this.pageIndex,this.pageSize)
        },

        //添加用户
        addUser(){
           this.$router.push("/user/AddUser")
        },

        //修改用户
        updateUser(workId){
           //跳转页面带参数
           this.$router.push({name:"UpdateUser",params:{workId:workId}})
        },

        //删除用户
        delUser(workId){
            console.log(workId)
             this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                    this.$axios.post("/user-info/delUserById","workId="+workId).then(res=>{
                        if (res.data.code==200) {
                            this.$message.success("删除成功")
                            this.pageIndex=1
                          this.getUserList(this.workName,this.workTel,this.workSex,this.roleId,this.pageIndex,this.pageSize)
                        }else{
                            this.$message.error("删除失败")
                        }
                    })
            }).catch(() => {
            this.$message({
                    type: 'info',
                    message: '已取消删除'
            });
            });

        },
        //查询所有角色信息
        getAllRole(){
            this.$axios.post("/role-info/getALLRole").then(res=>{
                console.log(res)
                this.roleList=res.data.data
            })
        },

    },
    created(){
        this.getUserList(this.workName,this.workTel,this.workSex,this.roleId,this.pageIndex,this.pageSize)
        //查询所有角色信息
        this.getAllRole()
    }
}
</script>
<style scoped>
.el-breadcrumb{
    margin-bottom: 20px;
}
.el-table{
    margin-top: 20px;
    margin-bottom: 20px;
}
.search_input{
    margin-left:10px;
}
.opt_div{
    display: flex;
}
.div_btn{
    /*display: flex;*/
    /*justify-content: right;*/
  margin-left: -132px;
}
</style>
